/** @type {import('tailwindcss').Config} */
const colorAuth = require("./src/static/color.json");
const config = require("./src/static/auth.json");
const defaultTheme = require("tailwindcss/defaultTheme");
const colorArr = colorAuth;

const colorFunc = (theme) => {
  let obj = { ...theme("colors") };
  for (const key in colorArr) {
    if (colorArr[key] && typeof colorArr[key] == "object") {
      for (const colorKey in colorArr[key]) {
        if (typeof colorKey == "number" || !Object.is(Number(colorKey), NaN)) {
          obj[key + "-" + (Number(colorKey) + 1)] = colorArr[key][colorKey];
        } else {
          obj[key + "-" + colorKey] = colorArr[key][colorKey];
        }
      }
    }
  }
  return obj;
};

const transformConfig = (obj) => {
  let data = {};
  for (const key in obj) {
    if (typeof obj[key] == "number") {
      data[key] = obj[key] + "px";
    } else {
      data[key] = obj[key];
    }
  }
  return data;
};

const staticArr = transformConfig({
  xxxs: 2,
  xxs: 4,
  xsm: 6,
  xs: 8,
  sm: 12,
  md: 16,
  lg: 24,
  xl: 36,
  xxl: 40,
  "2px": 2,
  "6px": 6,
  "7px": 7,
  "14px": 14,
  "15px": 15,
  "18px": 18,
  "20px": 20,
  "32px": 32,
  "48px": 48,
  "54px": 54,
  "65px": 65,
  "72px": 72,
  "100px": 100,
  "152px": 152,
  "166px": 166,
  "190px": 190,
  "331px": 331,
  "348px": 348,
  icon: 48,
});

module.exports = {
  purge: [],
  purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {
      xxs: "360px",
      xs: "420px",
      s: "530px",
      ss: "630px",
      ...defaultTheme.screens,
    },
    spacing: { ...staticArr, ...defaultTheme.spacing },
    margin: { ...staticArr, 10: "10px" },
    padding: { ...staticArr, ...defaultTheme.padding },
    minWidth: { ...staticArr, ...defaultTheme.spacing },
    minHeight: { ...staticArr, ...defaultTheme.spacing },
    maxHeight: { ...staticArr, ...defaultTheme.spacing },
    maxWidth: { ...staticArr, ...defaultTheme.spacing },
    textColor: (theme) => {
      return colorFunc(theme);
    },
    borderColor: (theme) => {
      return colorFunc(theme);
    },
    backgroundColor: (theme) => {
      return colorFunc(theme);
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
